<template>
  <div class="app-container">
    <div class="portal-left">
      <el-card class="box-card" style="overflow-y: auto">
        <div class="portal-query-header">
          <el-input
            v-model="name"
            size="small"
            placeholder="请输入内容"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </div>
        <div v-if="templates">
          <div
            v-for="item in templates"
            :key="item.id"
            class="portal-column-li"
            :class="item.id === template.id?'active':''"
          >
            <el-image :src="item.icon" class="portal-image" lazy />
            <div class="portal-column-li-title" @click="changeTemplate(item)">{{ item.columnName }}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="portal-right">
      <template-column :template="template.templateType" :template-id="template.id" />
    </div>
  </div>
</template>
<script>
import componentJob from '@/api/system/component'
import TemplateColumn from '@/views/system/portal/template'
export default {
  name: 'Index',
  components: { TemplateColumn },
  data() {
    return {
      name: '',
      templates: [],
      template: {}
    }
  },
  mounted() {
    this.initTemplate()
  },
  methods: {
    initTemplate() {
      componentJob.all().then(res => {
        this.templates = res.content
      }).catch(error => {
        console.log(error)
      })
    },
    changeTemplate(Object) {
      this.template = Object
    }
  }
}
</script>

<style lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  display: contents;
  position: relative;
}

.portal-left {
  position: fixed;
  left: 215px;
  width: 200px;
  bottom: 40px;
  top: 95px;
}

.portal-right {
  position: fixed;
  left: 425px;
  top: 95px;
  bottom: 40px;
  right: 10px;
}

.box-card {
  width: 100%;
  height: 100%;
}

.portal-query-header {
  width: 100%;
  height: 40px;
}

.portal-column-li {
  width: 100%;
  height: 40px;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  line-height: 40px;
  position: relative;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  transition: 0.3s
}

.portal-column-li.active {
  box-shadow: 0 1px 4px 0 rgba(0, 191, 255, 0.8);
}

.portal-image {
  width: 20px;
  height: 20px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}

.portal-column-li-title {
  width: 115px;
  height: 40px;
  line-height: 40px;
  margin-left: 10px;
  float: left;
  text-align: left;
  font-size: 14px;
  overflow: hidden;
}

.portal-left {
  .el-card {
    .el-card__body {
      padding: 10px;
    }
  }
}

.portal-right {
  overflow-y: auto;
}
</style>
